<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="<c:url value='/css/Pub.css'/>"></link>
<script type="text/javascript" src="<c:url value='/js/user.js'/>"></script>
<script type="text/javascript">
  		var path = "<c:url value='/'/>";
  	</script>
<style type="text/css">
table {
	font-size: 10pt;
	width: 400px;
}

td {
	padding: 5px;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"
	type="text/css"></link>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/easyui/themes/icon.css"
	type="text/css"></link>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

</head>
<body style="text-align: center;">
	<br />
	<br />
	<br />
	<br />
	<form name="f1" method="post"
		action="${pageContext.request.contextPath}/user?action=register">
		<table>
			<tr style="background: #87CEFF;">
				<td colspan="2" align="center">用户注册</td>
			</tr>
			<tr>
				<td>姓名 <font color="red">*</font>：
				</td>
				<td><input id="name" type="text" name="name"
					onblur="check(this);" class="easyui-validatebox"
					data-options="required:true,
					missingMessage:'姓名必填' " /></td>
				<td style="width:100px;"><font color="red"><span
						id="username1"></span></font> <font color="green"><span
						id="username2"></span></font></td>
			</tr>
			<tr>
				<td>密码 <font color="red">*</font>：
				</td>

				<td><input id="password" type="password" name="password"
					class="easyui-validatebox"
					data-options="required:true,missingMessage:'密码必填'" /></td>

				<td style="width:100px;"><font color="red"><span
						id="passwordSpan"></span> </font></td>
			</tr>
			<tr>
				<td>再次输入密码 <font color="red">*</font>：
				</td>
				<td><input id="repassword" type="password" name="repassword"
					class="easyui-validatebox"
					data-options="required:true,
					missingMessage:'密码必填' "
					onblur="surePassword();" /></td>
				<td style="width:100px;"><font color="green"><span
						id="password1"></span> </font> <font color="red"><span
						id="password2"></span> </font></td>
			</tr>
			<tr>
				<td>电话：</td>
				<td><input id="repassword" type="text" name="phone"
					class="easyui-validatebox"
					data-options="required:true,
					missingMessage:'电话必填' "
					onblur="checkPhoneNum(this);" /></td>
				<td style="width:100px;"><font color="green"><span
						id="phone1"></span> </font> <font color="red"><span id="phone2"></span>
				</font></td>
			</tr>
			<tr>
				<td>Email：</td>
				<td><input id="repassword" type="text" name="email"
					class="easyui-validatebox"
					data-options="required:true,
					missingMessage:'邮箱必填' "
					onblur="checkEmail(this);" /></td>
				<td style="width:100px;"><font color="green"><span
						id="email1"></span> </font> <font color="red"><span id="email2"></span>
				</font></td>

			</tr>
			<tr>
				<td>验证码：</td>
				<td style="width:100px;"><input name="sCode" type="text"
					name="code" class="easyui-validatebox"
					data-options="required:true,
					missingMessage:'验证码必填' " /></td>
				<td style="width:80px;"><img id="imgCode"
					onclick="changeValidate();"
					src="${pageContext.request.contextPath }/codeImage" title="看不清楚换一张"></img>
				</td>
			</tr>
			<tr>
				<td id="msg" colspan="2" style="color: red;" align="center"></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit"
					class="OperBtn" value="注册" style="margin: 5px;color:#6495ED" />
					<input type="reset" class="OperBtn" style="margin: 5px;color:#6495ED" value="取消">
						</td>
			</tr>
		</table>
	</form>

</body>

<script type="text/javascript">
	//使用的ajax
  		var req;
  		var name;
  		function check(obj){
  
  		if(window.XMLHttpRequest){
  			req = new XMLHttpRequest();
  					
  		
  		}else if(window.ActiveXObjext){
  		    req = new ActiveXObjext("Microsoft.XMLHTTP");
  		}
  		name = obj.value;
  		<%-- 注意上下文路径的问题--%>
  		req.open("POST", "${pageContext.request.contextPath}/validate", true); 
  		  
  		 req.onreadystatechange=function()
	 	{
	 	if (req.readyState==4 && req.status==200)
		{
		
			var checkResult = req.responseText; 
  		    if(checkResult=="yes"){
  		     document.getElementById("username2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
  		    document.getElementById("username1").innerHTML = '';
  		    document.getElementById("username1").innerHTML = "用户名已存在";
  		    }
  		    else {
  		     document.getElementById("username1").innerHTML = '';
  		    document.getElementById("username2").innerHTML = '';
  		   document.getElementById("username2").innerHTML =  "用户名可入库";
  		   }
		}
		}
		req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这个代码加载open和send之间
  		req.send("name="+name);
  		}
  		</script>

<script type="text/javascript">
	//检查验证码
  		function changeValidate(){
  		var ran=Math.random();
  		document.getElementById('imgCode').src = 
  		"${pageContext.request.contextPath }/codeImage?t="+ran; 
  		}
  	</script>
<script type="text/javascript">
  		function changeValidate(){
  		var ran=Math.random();
  		document.getElementById('imgCode').src = 
  		"${pageContext.request.contextPath }/codeImage?t="+ran; 
  		}
  		
  		</script>
<script type="text/javascript">
	//确认密码
  		function surePassword(){
  		//得到前面输入的密码
  		var password = document.getElementById('password').value;
  		var repassword = document.getElementById('repassword').value;
  		//判断密码是否相等
  		if(password == repassword){
  		    document.getElementById("password1").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
  		    document.getElementById("password2").innerHTML = '';
  		 document.getElementById("password1").innerHTML = "两次密码相同";
  		}else{
  		 document.getElementById("password1").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
  		 document.getElementById("password2").innerHTML = '';
  		 document.getElementById("password2").innerHTML = "两次密码不相同";
  		}
  		}
  		
  		//正则表达式检查电话号码是符合规则
  		function checkPhoneNum(obj){
		   var number = obj.value;
		    if(!(/^1[34578]\d{9}$/.test(number))){ 
		     document.getElementById("phone2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
  		    document.getElementById("phone1").innerHTML = '';
	        document.getElementById("phone2").innerHTML = "手机号码格式错误";
		    }else{
		      document.getElementById("phone2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
  		    document.getElementById("phone1").innerHTML = '';
		   document.getElementById("phone1").innerHTML = "手机号码格式正确";
		    } 
		    }
		    //正则表达式验证邮箱格式
		  	function checkEmail(obj){
		  	var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
		   var email = obj.value;
		    if(!(reg.test(email))){ 
		      document.getElementById("email2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
  		    document.getElementById("email1").innerHTML = '';
	        document.getElementById("email2").innerHTML = "邮箱格式格式错误";
		    }else{
		     document.getElementById("email2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
  		    document.getElementById("email1").innerHTML = '';
		   document.getElementById("email1").innerHTML = "邮箱格式格式正确";
		    } 
		    }  
  		</script>

</html>
